<template>
	<div class="areaCode_com">
		<van-action-sheet v-model="hasShow" :title="$t('login.validateLogon')">
			<div class="content">
				<div class="title">{{ruleForm.mobile ? $t('login.phoneVerify') : $t('login.emailVerify')}}</div>
				<div class="des">{{$t('login.codeTo')}} {{ruleForm.mobile || ruleForm.email}}</div>
				<div class="input_box">
					<el-input v-model="captcha" :placeholder="$t('forgot.verification')">
						<div class="downtime" :style="dwonCodeText ? 'color: #fff' : ''" @click="handleSms" slot="suffix">
							{{dwonCodeText ? dwonCodeText : codeText}}
						</div>
					</el-input>
				</div>
				<el-button class="submit_but" @click="submit">{{$t('verify')}}</el-button>
			</div>
		</van-action-sheet>
	</div>
</template>

<script>
	import {
		loginTwo,
		emsSend,
		smsSend
	} from '@/api/home.js'

	export default {
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			ruleForm: {
				type: Object,
				default: function() {
					return {}
				},
			},
		},
		components: {},
		data() {
			return {
				intimer: null,
				dwonCodeText: '',
				captcha: '',
			}
		},
		computed: {
			hasShow: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			},
			codeText: {
				get() {
					return this.$t('forgot.get')
				},
				set(val) {
					return val
				}
			},
		},
		watch: {
			hasShow: {
				handler(val) {
					if (val) {
						this.$nextTick(() => {
							this.handleSms()
						})
					}
				},
				immediate: true
			}
		},
		mounted() {},
		methods: {
			async handleSms() {
				if (this.intimer) return
				let res;
				if (this.ruleForm.mobile) {
					res = await smsSend({
						account: this.ruleForm.account,
						mobile: this.ruleForm.mobile,
						event: 'login',
						area_code: this.ruleForm.area_code
					})
				} else {
					res = await emsSend({
						account: this.ruleForm.account,
						email: this.ruleForm.email,
						event: 'login'
					})
				}
				// const res = await emsSend({
				// 	email: this.ruleForm.account,
				// 	event: 'login'
				// })
				if (res && res.code == 1) {
					let time = 60
					this.codeText = '60s'
					this.intimer = setInterval(() => {
						this.dwonCodeText = (--time) + 's'
						if (time <= 0) {
							clearInterval(this.intimer)
							this.intimer = null
							this.dwonCodeText = '';
							this.codeText = this.$t('forgot.get')
						}
					}, 1000)
					this.$toast.success(res.msg)
				} else {
					this.$toast.fail(res.msg)
				}
			},
			async submit() {
				if (!this.captcha) {
					this.$toast(this.$t('forgot.verification'))
					return
				}
				// console.log('^^^^', {
				// 	account_EK42kn86: this.ruleForm.account,
				// 	password_TcNsrbjb: this.ruleForm.password,
				// 	captcha_Tmnadyqt: this.captcha,
				// });
				const res = await loginTwo({
					account_EK42kn86: this.ruleForm.account,
					password_TcNsrbjb: this.ruleForm.password,
					captcha_Tmnadyqt: this.captcha,
				})
				if (res && res.code == 1) {
					this.$store.commit('onChangeUserInfo', res.data.userinfo)
					this.$router.replace('/')
					this.$toast.success(res.msg)
				} else {
					this.$toast.fail(res.msg)
				}
			},
			// async login() {
			// 	const res = await loginTwo({
			// 		...this.ruleForm,
			// 	})
			// }
		}
	}
</script>
<style lang="less" scoped>
	.areaCode_com {
		::v-deep .van-popup {
			background-color: #1A1A1A;

			.van-action-sheet__header {
				text-align: left;
				color: #fff;
				padding-left: 16px;
			}

			.van-action-sheet__close {
				color: #fff;
			}
		}

		.content {
			color: #fff;
			padding: 15px;
			text-align: left;

			.title {
				font-size: 16px;
				margin-bottom: 15px;
			}

			.des {
				color: #999;
				font-size: 14px;
				margin-bottom: 15px
			}

			::v-deep .el-input__inner {
				background-color: #3D3D3D;
				border: 0;
				height: 50px;
				line-height: 50px;
				color: #fff;
				border-radius: 16px;
				padding-right: 60px;

				&::placeholder {
					color: #999999;
				}
			}

			::v-deep .el-input__suffix {
				line-height: 50px;
				padding-right: 20px;
			}

			.downtime {
				color: #0DF5E3;
				font-size: 14px;
			}
		}

		.submit_but {
			display: block;
			margin: 60px auto 50px;
		}

	}
</style>